<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .item{
            font-size: 20px;
            font-weight: 700;
            color: white;
            margin-right: 15px;
            margin-bottom: 15px;
            width: 210px;
            position: absolute;
        }
        .item-1{
            background-color: palegoldenrod;
            height: 300px;
        }
        .item-2{
            background-color: pink;
            height: 270px;
        }
        .item-3{
            background-color:rgb(120, 120, 163);
            height: 200px;
        }
        .item-4{
            background-color: rgb(143, 141, 118);
            height: 394px;
        }
        .item-5{
            background-color: rgb(104, 198, 211);
            height: 360px;
        }
        .item-6{
            background-color: rgb(222, 154, 228);
            height: 170px;
        }
        .item-7{
            background-color: palegoldenrod;
            height: 250px;
        }
        .item-8{
            background-color: rgb(192, 112, 149);
            height: 150px;
        }
        .item-7{
            background-color: rgb(125, 179, 100);
            height: 280px;
        }
        .item-8{
            background-color: rgb(247, 210, 231);
            height: 410px;
        }
        .item-9{
            background-color: rgb(228, 252, 229);
            height: 270px;
        }
        .item-10{
            background-color: rgb(202, 127, 173);
            height: 150px;
        }
        .item-11{
            background-color: rgb(161, 221, 201);
            height: 200px;
        }
        .item-12{
            background-color: rgb(236, 168, 168);
            height: 260px;
        }
        .item-13{
            background-color: rgb(152, 188, 197);
            height: 100px;
        }
        .item-14{
            background-color: rgb(77, 82, 165);
            height: 200px;
        }
        .item-15{
            background-color: rgb(189, 227, 236);
            height: 190px;
        }
        .item-16{
            background-color: rgb(241, 179, 218);
            height: 350px;
        }
        .item-17{
            background-color: rgb(179, 231, 222);
            height: 210px;
        }
        .item-18{
            background-color: rgb(181, 220, 230);
            height: 360px;
        }
        .item-19{
            background-color: rgb(173, 190, 238);
            height: 200px;
        }
        .item-20{
            background-color: rgb(231, 185, 188);
            height: 240px;
        }
        .item-21{
            background-color: rgb(211, 207, 230);
            height: 300px;
        }
        .item-22{
            background-color: rgb(205, 161, 241);
            height: 200px;
        }
        .item-23{
            background-color: rgb(190, 152, 197);
            height: 210px;
        }
        .item-24{
            background-color: rgb(152, 188, 197);
            height: 190px;
        }
    </style>
</head>

<body>
        <div class="item item-1" >1</div>
        <div class="item item-2" >2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
        <div class="item item-10">10</div>
        <div class="item item-11">11</div>
        <div class="item item-12">12</div>
        <div class="item item-13">13</div>
        <div class="item item-14">14</div>
        <div class="item item-15">15</div>
        <div class="item item-16">16</div>
        <div class="item item-17">17</div>
        <div class="item item-18">18</div>
        <div class="item item-19">19</div>
        <div class="item item-20">20</div>
        <div class="item item-21">21</div>
        <div class="item item-22">22</div>
        <div class="item item-23">23</div>
        <div class="item item-24">24</div>
        <script>
            let items = document.querySelectorAll('.item')
            let gap = 20;
            Waterfall();
            function Waterfall() {
                let pageWidth = window.innerWidth;
                let itemWidth = items[0].offsetWidth;
                let columns = parseInt(pageWidth / (itemWidth + gap));
                let arr = [];
                for(let i = 0;i < items.length; i++){
                    if(i < columns){
                        items[i].style.top = [0];
                        items[i].style.left=(itemWidth + gap)* i + 'px';
                        arr.push(items[i].offsetHeight);
                    }else{
                        let minHeight = arr[0];
                        let index = 0;
                        for(let j = 0;j < arr.length;j++){
                            if(minHeight > arr[j]){
                                minHeight = arr[j];
                                index = j;
                            }
                        }
                        items[i].style.top = arr[index] + gap + 'px';
                        items[i].style.left=items[index].offsetLeft + 'px';
                        arr[index] = arr[index]+ items[i].offsetHeight + gap;
                    }
                }
            }
            window.onresize = function(){
                waterFall();
            }
        </script>
</body>

</html>